import "package:flutter/material.dart";

class AnimatedListPage extends StatefulWidget {
  const AnimatedListPage({super.key});
  @override
  State<StatefulWidget> createState() => AnimatedListPageState();
}

class AnimatedListPageState extends State<AnimatedListPage> {
  final List<int> _list = [];
  final globalKey = GlobalKey<AnimatedListState>(); //用于访问AnimatedListState的状态

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedListPage'),
      ),
      body: AnimatedList(
          key: globalKey,
          initialItemCount: _list.length,
          // 当数据改变时就会触发builder
          itemBuilder:
              (BuildContext context, int index, Animation<double> animation) {
            // 插入行数据
            return FadeTransition(
              opacity: animation,
              child: ListTile(
                key: ValueKey(_list[index]),
                title: Text("${_list[index]}"),
                trailing: IconButton(
                  icon: const Icon(Icons.delete),
                  onPressed: () {
                    // 点击删除
                    setState(() {
                      // removeItem，是State的方法，用于删除状态的某个列表或集合的一个项
                      globalKey.currentState!.removeItem(
                        index,
                        (context, animation) {
                          // 找到删除的元素ListTitle
                          var item = ListTile(
                            key: ValueKey(_list[index]), //必须是唯一的，用于在删除时遭到删除的节点
                            // 删除列表数据
                          );
                          _list.removeAt(index);
                          // 删除动画是合成动画：淡出+收缩
                          return FadeTransition(
                            //淡出动画
                            opacity: CurvedAnimation(
                                //透明度变化
                                parent: animation,
                                // 透明变化更快0.5->1
                                curve: const Interval(0.5, 1.0)
                                // curve: Curves.linear
                                ),
                            // 不断缩小列表项的高度
                            child: SizeTransition(
                              sizeFactor: animation,
                              axisAlignment: 0,
                              child: item,
                            ),
                          );
                        },
                        duration: const Duration(milliseconds: 200), //毫秒:200
                      );
                    });
                  },
                ),
              ),
            );
          }),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _list.add(_list.length + 1);
          // 通知globalKey列表状态改变
          globalKey.currentState!.insertItem(_list.length - 1);
        },
      ),
    );
  }
}
